<template>
  <div class="w-full h-max backdrop-blur bg-[#00000050] sticky left-0 top-0 flex-center">
    <div class="flex items-center justify-between gap-[10px] p-[8px_16px] w-full max-w-section">
      <a
        :href="getTargetUrl('/')"
        class="h-[40px] cursor-pointer mr-auto"
        @click="handleClickLogoTrack"
      >
        <XMImg
          :src="logo"
          class="h-full"
          isAutoImg
        />
      </a>
      <div class="flex-center bg-[#00000020] size-[40px] rounded-full cursor-pointer">
        <XMCateGoryIcon />
      </div>
      <a
        :href="getTargetUrl('/search')"
        @click="handleClickSearchTrack"
        class="flex-center bg-[#00000020] size-[40px] rounded-full cursor-pointer"
      >
        <XMSearchIcon />
      </a>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useConfigStore } from "~/composables/useConfigStore";
import { useGA } from "~/composables/useGA";

const { config } = useConfigStore();
const { logo } = config.value;
const { trackEvent } = useGA();

const handleClickLogoTrack = () => {
  trackEvent({
    eventName: "Click_Logo",
  });
};

const handleClickSearchTrack = () => {
  trackEvent({
    eventName: "Click_Search",
  });
};
</script>

<style scoped></style>
